<template>
    <lay-container fluid="true" style="padding: 10px">
        <lay-row :space="10">
            <lay-col :md="24">
                <lay-card>
                    <div style="margin-top:20px;">
                        <lay-row>
                            <lay-col :md="24">
                                <div class="home-tips shadow" style="background:rgb(230, 230, 230);">
                                    <div class="home-tips-container" style="    height: auto;">
                                        <div class="demoTable">
                                            <div class="layui-inline" style="width:80%">
                                                <input class="layui-btn layui-btn-sm" type="text"
                                                    v-model="pageconfig.search.title" placeholder="搜索"
                                                    style="text-align: left;color: #009688; background-color: #fff;width:100%">
                                            </div>
                                            <button class="layui-btn layui-btn-sm" @click="a_search()">搜索</button>
                                            <button class="layui-btn layui-btn-sm" @click="synfile()">同步</button>
                                            <button class="layui-btn layui-btn-sm" @click="upload()">上传</button>
                                        </div>
                                    </div>
                                </div>
                            </lay-col>

                        </lay-row>
                    </div>
                </lay-card>
            </lay-col>
            <lay-col :md="24">
                <lay-card>
                    <lay-breadcrumb separator=">">

                        <lay-breadcrumb-item v-for="n in pageconfig.search.parentid" @click="go(n.folder_id)" :key="n"
                            :title="n.name"></lay-breadcrumb-item>

                    </lay-breadcrumb>
                    <lay-row >
                        <lay-col :md="6" v-for="(item, index) in pageconfig.data.data" :key="index">
                            <lay-card  >
                                <div v-if="item.icon == 'folder'" @click="viwe(item)">
                                    <div class="alone">
                                        <lay-icon type="layui-icon-list" color="#FF5722" size="40px"></lay-icon>
                                    </div>
                                </div>
                                <div v-if="item.icon == 'mp3'" @click="mp3viwe(item)">
                                    <div class="alone">
                                        <lay-icon type="layui-icon-headset" color="#FF5722" size="40px"></lay-icon>
                                    </div>
                                </div>
                                <div v-if="item.icon == 'zip' || item.icon == 'ios' || item.icon == 'rar' || item.icon == 'exe'|| item.icon == 'ppt'|| item.icon == 'pptx'"
                                    @click="mp3viwe(item)">
                                    <div class="alone">
                                        <lay-icon type="layui-icon-tabs" color="#FF5722" size="40px"></lay-icon>
                                    </div>
                                </div>
                                <div v-if="item.icon == 'mp4' || item.icon == '3gp' || item.icon == 'avi' || item.icon == 'flv'"
                                    @click="details(item)">
                                    <div class="alone">
                                        <img style="height: 200px;" :src="item.imgsrc" :title="item.title" />
                                        <!-- <lay-icon type="layui-icon-tabs" color="#FF5722" size="40px"></lay-icon> -->
                                    </div>
                                </div>
                                <div v-if="item.icon == 'jpg' || item.icon == 'png'"
                                    @click="showimg(item)">
                                    <div class="alone">
                                        <img style="height: 200px;" :src="item.imgsrc" :title="item.title" />
                                        <!-- <lay-icon type="layui-icon-tabs" color="#FF5722" size="40px"></lay-icon> -->
                                    </div>
                                </div>
                                <!-- <div v-else @click="mp3viwe(item)">
                                    <div class="alone">
                                        <lay-icon type="layui-icon-tabs" color="#FF5722" size="40px"></lay-icon>
                                    </div>

                                </div> -->
                                <div @click="mp3viwe(item)"
                                    style="text-align: center;   height: 42px;line-height: 42px;padding: 0 15px; border-top: 1px solid #f6f6f6;font-size: 14px; text-overflow: ellipsis ;white-space: nowrap;overflow: hidden;">

                                    {{ item.name }}

                                </div>


                            </lay-card>
                   
                        </lay-col>
               
            
                 
                    </lay-row>
                    <lay-page @change="change" v-model="pageconfig.page" :total="pageconfig.total" :limit="pageconfig.limit"
                        :showPage="true">
                    </lay-page>
                </lay-card>
            </lay-col>
        </lay-row>
    </lay-container>
</template>

<script lang="ts" setup>
import { ref, h } from "vue";
import { layer } from "@layui/layer-vue";
import webosutils from 'webosutils';
import { useRoute } from 'vue-router';
import video from "../../components/video/video.vue";
import fileupload from "./fileupload.vue";

const route = useRoute();
const uid=ref("");
const pageconfig = ref({
    limit: 12,
    page: 1,
    total: 0,
    search: {
        title: "",
        folder_id: "d0",
        parentid: [{ folder_id: "d0", name: "首页" }] as any
    },
    data: { title: "", data: [] as any }
});
const showimg=(item:any)=>{
    layer.photos({
      imgList:[{src:item.imgsrc,alt:item.title}]
    })
}
const go = (id: string) => {
    pageconfig.value.page=1;
    var i = pageconfig.value.search.parentid.findIndex(c => c.folder_id == id);
    if (i > -1) {
        let newany = [] as any;
        pageconfig.value.search.parentid.forEach((v: any, index: any) => {
            if (i < index) {
                return;
            }
             ;
            newany.push(v);
        });
        //pageconfig.value.search.parentid
        pageconfig.value.search.parentid = newany;
    }


    pageconfig.value.search.folder_id = id;
    ajax();
}
const viwe = (item: any) => {
    //记录上级目录id
    let i = pageconfig.value.search.parentid.filter(c => c.folder_id == item.key);
    if (i.length > 0) {
        pageconfig.value.search.folder_id = item.key;
        ajax();
    } else {
        pageconfig.value.search.parentid.push({ folder_id: item.key, name: item.name });
        pageconfig.value.search.folder_id = item.key;
        ajax();
    }


}
const mp3viwe = (item: any) => {
    window.open(item.weblink);
    // pageconfig.value.search.folder_id=item.key;
    // ajax();
}
const callback = () => {
    synfile();
   layer.close( uid.value) ;
}
const upload = () => {
    var ks = h(fileupload, { config: { folder_id: pageconfig.value.search.folder_id }, callback: callback }) as any;
    uid.value= layer.open({
        title: "上传文件",
        area: ['80%', '80%'],
        content: ks,
        shade: true,
        anim: 4,
        shadeClose: false,

    })
    // pageconfig.value.search.parentid = pageconfig.value.search.parentid.filter((c: any) => c.folder_id !== pageconfig.value.search.folder_id);
    // if (pageconfig.value.search.parentid.length > 1) {
    //     pageconfig.value.search.folder_id = pageconfig.value.search.parentid[pageconfig.value.search.parentid.length - 1].folder_id;
    //     ajax();
    // } else {

    //     if (pageconfig.value.search.parentid.length == 0) {
    //         layer.msg("已经是第一页了", { icon: 3, time: 1000 })
    //     } else {
    //         console.log(pageconfig.value.search.parentid)
    //         pageconfig.value.search.folder_id = "d0";
    //         ajax();
    //     }


    //}

}
const synfile = () => {
   webosutils.http.post("/v1/api/ctdisk/synfile", { folder_id: pageconfig.value.search.folder_id, start: 0 }, "正在同步").then((res:any) => {
        if (res.success) {
            layer.msg(res.msg, { icon: 1, time: 1000 });
            ajax();
        } else {
            layer.msg(res.msg, { icon: 3, time: 1000 })
        }


    }).catch((res:any) => {
        layer.msg("请求错误！", { icon: 3, time: 1000 })
    })
}

const ajax = () => {
    //记录上级目录

   webosutils.http.post("/v1/api/ctdisk/cffile", { key: pageconfig.value.search.folder_id, title: pageconfig.value.search.title, page: pageconfig.value.page, limit: pageconfig.value.limit }, "请稍等").then((res:any) => {

        pageconfig.value.total = res.count;

        pageconfig.value.data.data = Object.freeze(res.data);
        // pageconfig.value.data.title="免费ppt模板下载";
        var win = window as any;
        win.scrollTo(0, 0)

    }).catch((res:any) => {

    })



}
//获取详情
const details = (da: any) => {
    var ks = h(video, { config: { id: da.key,title:da.name, imgsrc: da.imgsrc, folder_id: pageconfig.value.search.folder_id } }) as any;
    layer.open({
        title: "正在播放" + da.name,
        area: ['80%', '80%'],
        content: ks,
        shade: true,
        anim: 1,
        shadeClose: false,

    })
}

ajax();
const change = (page: any) => {

    pageconfig.value.page = page.current;
    pageconfig.value.limit = page.limit;
    ajax();
}
const a_search = () => {
    pageconfig.value.page = 1;
    ajax();
}




</script>

<style scoped>
:deep(.card-list-item .layui-card-body img) {
    width: 100%;
}

:deep(.card-list-item .layui-card-body) {
    padding: 0px !important;
}

.button-list {

    display: flex;
}

.button-list>div {
    flex: 1;
    text-align: center;
    color: #909399;

}

.layui-card .layui-card-footer {
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    border-top: 1px solid #f6f6f6;
    font-size: 14px;
}

.alone {
    text-align: center;


    transition: all .3s;
    -webkit-transition: all .3s;
}

.alone a {
    display: block;
    padding: 5px 5px;
    color: #fff;
    font-size: 14px;
}

.alone:hover a {
    color: #fff !important;
    background-color: #316cba
}
</style>
